<!-- 加载层 -->
<div *ngIf="isLoading" class="nav-loading">
  <div class="k-ball7a"></div>
  <div class="k-ball7b"></div>
  <div class="k-ball7c"></div>
  <div class="k-ball7d"></div>
</div>

<!-- 菜单层 -->
<ul *ngIf="!isLoading && list.length !== 0" class="sidebar-menu">
  <!-- 快速查找 -->
  <li apes-popover
      [apesContent]="queryContentTemplate"
      [apesPlacement]="'rightTop'"
      [apesOverlayClassName]="'sidebar-menu-list'"
      [(apesVisible)]="visible"
      [apesTrigger]="'click'"
      class="sidebar-menu-query">
    <apes-input-group [apesSuffix]="suffixIconSearch">
      <input apes-input
             placeholder="快速查找..."
             type="search"
             class="apes-fasttips"
             (keyup)="onKeyUp($event)">
    </apes-input-group>
    <ng-template #suffixIconSearch>
      <i apes-icon apesType="search"></i>
    </ng-template>
    <ng-template #queryContentTemplate>
      <ul class="sidebar-menu-query-content">
        <ng-container *ngIf="queryList.length > 0">
          <li *ngFor="let child of queryList" class="sidebar-menu-query-content-link">
            <a (click)="onSelect(child)"
               [routerLink]="child.link"
               [target]="child.target">{{'（'+child.sortCode+'）'+child.text}}</a>
          </li>
        </ng-container>
        <ng-container *ngIf="queryList.length == 0">
          <li style="text-align: center">
            <span>查无该菜单</span>
          </li>
        </ng-container>
      </ul>
    </ng-template>
  </li>
  <!-- 主节点 -->
  <ng-container *ngFor="let group of list">
    <!--<li apes-popover-->
    <!--[apesContent]="contentTemplate"-->
    <!--[apesPlacement]="'rightTop'"-->
    <!--[(apesVisible)]="visible"-->
    <!--[apesTrigger]="'click'"-->
    <!--[apesOverlayClassName]="'sidebar-menu-list'"-->
    <!--[routerLinkActive]="['sidebar-menu-group-title-selected']"-->
    <!--(click)="showMenu()"-->
    <!--class="sidebar-menu-group-title">-->
    <li [routerLinkActive]="['sidebar-menu-group-title-selected']"
        class="sidebar-menu-group-title">
      <div apes-popover
           [apesContent]="listContentTemplate"
           [apesPlacement]="'rightTop'"
           [apesOverlayClassName]="'sidebar-menu-list'"
           class="sidebar-menu-group-title-content">
        <div class="sidebar-menu-group-icon">
          <i apes-icon [apesType]= "group.icon"></i>
        </div>
        <div class="sidebar-menu-group-text">{{ group.text }}</div>
        <!-- 隐藏链接层（用于前端样式交互使用） -->
        <ng-container *ngFor="let child1 of group.children">
          <ng-container *ngIf="child1.children.length > 0">
            <ng-container *ngFor="let child2 of child1.children">
              <a style="display: none"
                 [routerLink]="child2.link"
                 [target]="child2.target">{{child2.text}}</a>
            </ng-container>
          </ng-container>
          <!--<ng-container *ngIf="child1.children.length == 0">-->
            <!--<a style="display: none"-->
               <!--[routerLink]="child1.link"-->
               <!--[target]="child1.target">{{child1.text}}</a>-->
          <!--</ng-container>-->
        </ng-container>
      </div>
      <!-- 弹框层模板 -->
      <ng-template #listContentTemplate>
        <ul class="sidebar-menu-list-content">
          <ng-container *ngFor="let child1 of group.children">
            <!-- 三层结构 -->
            <ng-container *ngIf="child1.children.length > 0">
              <li class="sidebar-menu-content-level3" [routerLinkActive]="['sidebar-menu-content-selected']">
                <!-- 二级节点 -->
                <div class="sidebar-menu-content-title">
                  <span>{{child1.text}} ></span>
                </div>
                <!-- 末级节点 -->
                <div class="sidebar-menu-content-list">
                  <ng-container *ngFor="let child2 of child1.children">
                    <span class="sidebar-menu-content-link"
                          [routerLinkActive]="['sidebar-menu-content-link-selected']">
                      <!-- 提供ID、节点名 -->
                      <!--<a (click)="onSelect(child2)"-->
                      <!--[routerLink]="child2.link"-->
                      <!--[target]="child2.target">{{'（'+child2.sortCode+'）'+child2.text}}</a>-->
                      <!-- 只提供节点名 -->
                      <a (click)="onSelect(child2)"
                         apes-tooltip
                         [apesTitle]="child2.sortCode"
                         [apesMouseEnterDelay]="1.5"
                         [apesMouseLeaveDelay]="0.01"
                         [routerLink]="child2.link"
                         [target]="child2.target">{{child2.text}}</a>
                    </span>
                  </ng-container>
                </div>
              </li>
            </ng-container>
            <!-- 二层结构（不推荐使用） -->
            <ng-container *ngIf="child1.children.length == 0">
              <li class="sidebar-menu-content-level2">
                <!-- 末级节点 -->
                <div class="sidebar-menu-content-list"
                     [routerLinkActive]="['sidebar-menu-content-link-selected']">
                  <!--<ng-container *ngFor="let child1 of child.children">-->
                  <a (click)="onSelect(child1)"
                     apes-tooltip
                     [apesTitle]="child1.sortCode"
                     [apesMouseEnterDelay]="1.5"
                     [apesMouseLeaveDelay]="0.01"
                     [routerLink]="child1.link"
                     [target]="child1.target"
                     class="sidebar-menu-content-link">{{child1.text}}</a>
                  <!--</ng-container>-->
                </div>
              </li>
            </ng-container>
          </ng-container>
        </ul>
      </ng-template>
    </li>
  </ng-container>
</ul>

<div *ngIf="!isLoading && list.length === 0" class="no-permission">
  <div>未获菜单权限</div>
</div>
